<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<title>Magic Compass Alipay Barcode Admin Site</title>
<link href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/resources/css/style.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/resources/jquery-ui-1.11.4.datepicker_only/jquery-ui.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/resources/jquery/jquery-2.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/jquery-ui-1.11.4.datepicker_only/jquery-ui.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(function() {
	    $("#fromDate").datepicker({
	    	  dateFormat: "yy-mm-dd",
	    	  defaultDate: "-7d",
			  autoSize: true,
	    });
	});
	$(function() {
	    $("#toDate").datepicker({
	    	  dateFormat: "yy-mm-dd",
	    	  defaultDate: "-0d",
			  autoSize: true,
	    });
	});	
	$('#queryButton').click(function (e) {
		if(!$("#fromDate").val()){
			$("#warningModalContent").text("From Date should not empty.");
			$("#warningModal").modal();
			e.preventDefault();
		}else if(!$("#toDate").val()){
			$("#warningModalContent").text("To Date should not empty.");
			$("#warningModal").modal();
			e.preventDefault();
		}else{
			$("#waitingModal").modal({
			  backdrop: 'static',
			  keyboard: false
			});
		}		
	});
	$('#prevPageLink').click(function (e) {
		$("#waitingModal").modal({
		  backdrop: 'static',
		  keyboard: false
		});
	});
	$('#nextPageLink').click(function (e) {
		$("#waitingModal").modal({
		  backdrop: 'static',
		  keyboard: false
		});
	});
});
</script>
</head>
<body>
<div id="wrap">
<%@ include file="../header.jsp" %>
	<div class="container">
		<div class="page-header">
			<h1 class="text-center">Merchant Transaction Query</h1>
		</div>
		<br>
		<form:form method="POST" modelAttribute="queryPageForm" action="transactionQuery" id="barcodePayForm">
			<div class="row">
				<div class="col-xs-2">&nbsp;</div>
				<div class="col-xs-1">From Date:</div>
				<div class="col-xs-1"><form:input type="text" path="fromDate" /></div>
				<div class="col-xs-1">To Date:</div>
				<div class="col-xs-1"><form:input type="text" path="toDate" /></div>
				<div class="col-xs-1">Merchant</div>
				<div class="col-xs-1">
					<form:select path="merchantId">
				      <form:option value="0" label="All" />
				      <form:options items="${merchantList}" />
				 	</form:select>
				</div>
				<div class="col-xs-1">&nbsp;</div>
				<div class="col-xs-1">
					<button type="submit" class="btn btn-primary btn-sm btn-block" name="queryButton" id="queryButton">Query</button>
					<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
					<input type="hidden" name="submitType" id="submitType" value="q"/>					
				</div>
				<div class="col-xs-2">&nbsp;</div>
			</div>
			<br>
			<table class="table table-bordered table-condensed table-striped">
				<thead>
					<tr>
				        <th class="lead text-center">Id</th>
				        <th class="lead text-center">Merchant</th>
				        <th class="lead text-center">Amount</th>
				        <th class="lead text-center">Time</th>
				        <th class="lead text-center">Status</th>
				        <th class="lead text-center">Type</th>
			        </tr>
			    </thead>
			    <tbody>
			    	<c:forEach var="mt" items="${pagedList}" varStatus="status">
			    	<tr>
			    		<td class="text-center"><a href="#" id="detailLink" onclick="showMTDetail(${mt.id})">${mt.id}</a></td>
			    		<td>${mt.merchantName}</td>
	                    <td class="text-right">${mt.totalAmount}</td>
	                    <td class="text-center">${mt.updateTimeStr}</td>
	                    <td>${mt.status}</td>
	                    <td>${mt.type}</td>
			    	</tr>
			    	</c:forEach>
			    </tbody>
		    </table>
		    
		    <div class="row">
				<div class="col-md-5">&nbsp;</div>
				<div class="col-md-1">
					<a href="<%=request.getContextPath()%>/admin/transactionQuery?paging=t&page=previous&fromDate=${queryPageForm.fromDate}&toDate=${queryPageForm.toDate}&merchantId=${queryPageForm.merchantId}" id="prevPageLink">Previous</a>
				</div>
				<div class="col-md-1">
					<a href="<%=request.getContextPath()%>/admin/transactionQuery?paging=t&page=next&fromDate=${queryPageForm.fromDate}&toDate=${queryPageForm.toDate}&merchantId=${queryPageForm.merchantId}" id="nextPageLink">Next</a>
				</div>
				<div class="col-md-5">&nbsp;</div>
			</div>
		</form:form>		
	<br><br><br>

<%@ include file="../warningModalDIV.jsp" %>
<%@ include file="../waitingModalDIV.jsp" %>
<%@ include file="../query/transactionDetailModalDIV.jsp" %>

	</div><!-- container end -->
</div><!-- wrap end -->
<%@ include file="../footer.jsp" %>
</body>
</html>